<template>
	<view class="px-30px pt-30px pb-120px">
		<view class="title mt-40px flex flex-x-between">
			<text>商品统计</text>
			<text>180次</text>
		</view>
		<DataCard title='默认分类'>
			<template #titleExtra>
				<view>总计<text class="color-pink font-bold">151</text>单</view>
			</template>
			<template #content>
				<Content v-model="state.content"></Content>
			</template>
		</DataCard>
	</view>
	
	<BackWorkSpace></BackWorkSpace>
</template>

<script setup name="ProductStatistics">
	import { ref,reactive } from 'vue';
	import DataCard from '@/components/DataCard.vue'
	import BackWorkSpace from '@/components/BackWorkSpace.vue'
	import Content from './Content.vue'
	
	const state= reactive({
		content:[
			{id:0,type:'队员',count:77,modelVale:0,ratio:234},
			{id:1,type:'队员',count:93,modelVale:0,ratio:65},
			{id:2,type:'队长',count:58,modelVale:0,ratio:80},
		]
	})
	
</script>

<style lang="scss">
	page {
		background: rgb(244,243,248);
	}
	
	.color-pink{
		color: rgb(211,122,152);
	}
</style>
